<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<link rel="stylesheet" href="$!rc.contextPath/css/bind_phone.css">
		<link rel="stylesheet" href="$!rc.contextPath/common/common.css" />
		<style type="text/css">
		.get-verify>div{
			width:50%;
		}
		</style>
		<title>绑定手机</title>
    </head>
	<body>
	<div class="title text-center">
		<a onClick="javascript:window.history.go(-1)"><</a>
		绑定手机
	</div>
	<div class="notice">
		手机号绑定，账号更安全
	</div>
	<div class="input">
		<div>
			<span>手机号</span>
			<input type="text" id="mobile" class="phone-num" placeholder="请输入您要绑定的手机号"/>
		</div>
		<div class="get-verify">
			<div>
				<span>验证码</span>
				<input type="text" id="vcode" placeholder="请输入验证码" />
			</div>
			<div class="verification-btn" onclick="f_send_sms()">获取验证码</div>
		</div>
		<input type="button" class="next" value="提交" onclick="f_bind_mobile()" />
	</div>
	</body>
	<script src="$!rc.contextPath/common/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		function f_send_sms(){
			var mobile = $("#mobile").val();
			 if(f_checkMobile(mobile)){
				 $.ajax({
					 url:"$!rc.contextPath/member/sendsms/" + mobile+"/1" ,
					 async:false,
					 "success": function(data) {
						if(data.code == '0'){
							 alert("短信已发送");
						}else{
							alert(data.text);
						}
					 }
				 })	
				 countDown();
			}
		}
		
		/* 手机号码验证 */
		function f_checkMobile(sMobile) {
			if (!(/^1[3|4|5|6|7|8|9][0-9]\d{4,8}$/.test(sMobile)) || sMobile.length != 11) {
				/* alert("不是完整的11位手机号或者正确的手机号前七位"); */
				alert("请输入正确的手机号");
				$("#mobile").focus();
				
				return false;
			}else{
				return true;
			}
		}
		
		function f_bind_mobile(){
			var mobile = $("#mobile").val();
			var vcode = $("#vcode").val();
			if(vcode.length!=6){
				alert("验证码格式不正确");
				return false;
			}
			if(f_checkMobile(mobile)){
				
				$.ajax({
	                type: 'POST',
	                url: '$!rc.contextPath/member/bindMobile',
	                data : {
						mobile : mobile,
						vcode : vcode
	                },
	                dataType: 'json',
	                success: function(data){
	                	if(data.code == "0"){
	                		alert("绑定成功！");
	                		window.location.href = '$!rc.contextPath/index';
	                	}else{
	                		alert(data.text);
	                	}
	                }
	            });
			}
		}
		
		function countDown(){
			clearInterval(time);
			if($(".verification-btn").html()=="获取验证码"){
				var countdown=60;
				var time=setInterval(function(){
					countdown--;
					$(".verification-btn").css("color","#838383")
					$(".verification-btn").html(countdown + "秒后，可重新获取");
					if(countdown==0){
						$(".verification-btn").html("重新获取验证码");
						$(".verification-btn").css("color","#ff2f2f")
						countdown=60;
						clearInterval(time);
					}
				},1000)
			}else{
				return false;
			}
			
		}
	</script>
</html>
